<template>
  <div class="organization">
    <div class="addOrg">
      <el-button type="primary" :icon="Plus" @click="updateDialog = true"
        >添加</el-button
      >
    </div>

    <!-- 组织列表表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      fit
      :loading="loading"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{ 'background-color': '#fafafa', color: 'black' }"
      size="small"
    >
      <el-table-column prop="id" label="id" width="80" align="center" />
      <el-table-column
        prop="organizationName"
        label="组织名称"
        width="200"
        align="center"
      />
      <el-table-column
        prop="organizationAddress"
        label="组织地址"
        align="center"
      >
        <template #default="scope">
          <span class="spanshow" :title="scope.row.organizationAddress">{{
            scope.row.organizationAddress
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="organizationTel"
        label="联系电话"
        width="150"
        align="center"
      />
      <el-table-column prop="organizationDesc" label="描述" align="center">
        <template #default="scope">
          <span class="spanshow" :title="scope.row.organizationDesc">{{
            scope.row.organizationDesc
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="官网" align="center">
        <template #default="scope">
          <a :href="scope.row.organizationUrl" target="_blank">{{
            scope.row.organizationName
          }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="establishDate" label="成立日期" align="center" />
      <el-table-column
        prop="legalPerson"
        label="法人"
        width="120"
        align="center"
      />

      <el-table-column label="状态" fixed="right" width="70" align="center">
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.status"
            @click="updateStatus(scope.row.id, scope.row.status)"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180" fixed="right">
        <template #default="scope">
          <el-link
            type="primary"
            icon="edit"
            style="margin-right: 10px"
            @click="updateFormVisible(scope.row)"
            >修改</el-link
          >
          <el-link
            type="danger"
            icon="delete"
            style="margin-right: 10px"
            @click="ORdelete(scope.row)"
            :disabled="isDisable"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 添加组织开始 -->
  <organization-add
    v-model:updateDialog="updateDialog"
    @updateList="getList"
    v-if="updateDialog"
  />
  <!-- 添加组织结束 -->

  <organization-update
    v-model:addDialog="addDialog"
    :updateForm="updateForm"
    v-if="addDialog"
  ></organization-update>
</template>

<script setup>
import { Edit, Delete, Plus } from "@element-plus/icons-vue";
import axios from "@/axios/index";
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import OrganizationUpdate from "@/views/organization/organizationUpdate.vue";
import organizationAdd from "./organizationAdd.vue";

let updateDialog = ref(false);

let loading = ref("true");

const addDialog = ref(false);

//修改组织的对应信息
const updateForm = ref({
  organizationName: "",
  organizationAddress: "",
  organizationTel: "",
  organizationDesc: "",
  organizationUrl: "",
  establishDate: "",
  legalPerson: "",
  status: 1,
  id: "",
});

//修改组织功能
const updateFormVisible = (form) => {
  updateForm.value.organizationName = form.organizationName;
  updateForm.value.organizationAddress = form.organizationAddress;
  updateForm.value.organizationTel = form.organizationTel;
  updateForm.value.organizationDesc = form.organizationDesc;
  updateForm.value.organizationUrl = form.organizationUrl;
  updateForm.value.establishDate = form.establishDate;
  updateForm.value.legalPerson = form.legalPerson;
  updateForm.value.status = form.status;
  addDialog.value = true;
  updateForm.value.id = form.id;
};

// 一级展示数据
let tableData = reactive([]);
let isDisable = ref(false);

// 获取组织数据
function getList() {
  loading.value = "true";
  axios.get("/organization/getList").then((res) => {
    loading.value = "false";
    tableData = res.data.data;
    fn(tableData);
  });
}

function fn(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].children != null) {
      fn(arr[i].children);
    }
    if (arr[i].status == 1) {
      arr[i].status = true;
    } else {
      arr[i].status = false;
    }
  }
}

onMounted(() => getList());
//组织删除
function ORdelete(row) {
  (isDisable.value = true),
    axios
      .delete("/organization", {
        params: {
          id: row.id,
        },
      })
      .then((resp) => {
        ElMessage({
          message: resp.data.message,
          type: "success",
          duration: 1500,
          onClose: function () {
            isDisable.value = false;
            getList();
          },
        });
      });
}

// 懒加载数据展示
// const load = (resolve) => {
//   setTimeout(() => {
//     resolve([
//       {
//         id: 31,
//         date: '2016-05-01',
//         name: 'wangxiaohu',
//         address: 'No. 189, Grove St, Los Angeles',
//       },
//       {
//         id: 32,
//         date: '2016-05-01',
//         name: 'wangxiaohu',
//         address: 'No. 189, Grove St, Los Angeles',
//       },
//     ])
//   }, 1000)
// }

//状态修改
let updateStatus = function (id, status) {
  if (status) {
    status = false;
  } else {
    status = true;
  }

  axios
    .get(`/organization/updateStatus`, {
      params: {
        id,
        status: status ? "0" : "1",
      },
    })
    .then((response) => {
      getList();
    });
};
</script>

<style lang="less" scoped>
.spanshow {
  white-space: nowrap;
  /*强制span不换行*/
  display: inline-block;
  /*将span当做块级元素对待*/
  width: 150px;
  /*限制宽度*/
  overflow: hidden;
  /*超出宽度部分隐藏*/
  text-overflow: ellipsis;
  /*超出部分以点号代替*/
}

.organization {
  height: 82vh;
  padding: 30px;
  border-radius: 5px;
  background-color: #fff;
}

.addOrg {
  display: flex;
  width: 100%;
  justify-content: start;
  margin-bottom: 10px;
}
</style>